<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible.sync="dialog"
    :title="0 ? '新增' : '编辑'"
    width="500px"
  >
    <el-form ref="form3" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="用户编号">
        <el-input v-model="form.id" :disabled="true" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="form.userName" style="width: 370px;" />
      </el-form-item>
      <el-form-item style="margin-bottom: 0;" label="用户角色" prop="roleList" label-width="80px">
        <el-select
          v-model="form.roleList"
          style="width: 370px"
          multiple
          value-key="id"
          placeholder="请选择"
          @remove-tag="deleteTag"
         
        >
          <el-option
            v-for="item in form.roleNames"
            :key="item.id"
            :label="item.roleName"
            :value="item"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
let userRoles = [];
import { add, editUser } from "@/api/system/user";
import { getAll } from "@/api/system/role";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
export default {
  data() {
    return {
      loading: false,
      dialog: false,
      roles: "",
      form: {
        id: "",
        userName: "",
        userPassword: "",
        shopId: "",
        createTime: "",
        createId: "",
        updateId: "",
        updateTime: "",
        isDelete: "",
        lastLoginTime: "",
        bak2: "",
        bak1: "",
        roleList: [],
        roleNames: [],
      },
      rules: {
        unique: [{ required: true, message: "please enter", trigger: "blur" }],
      },
    };
  },
  
  mounted() {
      this.getRoles();  
  },
  methods: {
    cancel() {
      this.resetForm();
    },
    doSubmit() {
      this.loading = false;
      
      console.log('item.roleList',this.form.roleList)
      // var names=[];
      // for(let i=0;i<this.form.roleNames.length;i++){
      //   names.push({id:this.form.roleNames[i]})
      // }
      // this.form.roleList=names
      console.log(this.form,"================")
      editUser(this.form)
        .then((res) => {
          this.resetForm();
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2500,
          });
          this.loading = false;
          console.log("doSubmit -> this", this);
          // this.$parent.init()
          this.$emit("torefresh");
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    changeRole(value) {
      console.log(value,"===========")
      userRoles=[];
     value.forEach(function (data, index) {
        const role = { id: data };
        userRoles.push(role);
      });
      console.log(userRoles, "userroles");
    },
    deleteTag(value) {
      userRoles.forEach(function (data, index) {
        if (data.id === value) {
          userRoles.splice(index, value);
        }
      });

    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      this.getRoles();
      form.enabled = true;
    },
    // 打开编辑弹窗前做的操作
    [CRUD.HOOK.beforeToEdit](crud, form) {
      userRoles = [];
      const roleList = [];
      form.roleList.forEach(function (role, index) {
        roleList.push(role.id);
        // 初始化编辑时候的角色
        const rol = { id: role.id };
        userRoles.push(rol);
      });
      form.roleList = roleList;
    },
    // 提交前做的操作
    [CRUD.HOOK.afterValidateCU](crud) {
      if (this.roleList.length === 0) {
        this.$message({
          message: "角色不能为空",
          type: "warning",
        });
        return false;
      }
      // crud.form.roleList = userRoles;
      return true;
    },
    //获取弹窗内角色数据
    getRoles() {
      getAll()
        .then((res) => {
          this.from.roleNames = res.data;
        })
        .catch(() => {});
    },
    resetForm() {
      this.dialog = false;
      this.$refs["form3"].resetFields();
      this.form = {
        id: "",
        userName: "",
        userPassword: "",
        shopId: "",
        createTime: "",
        createId: "",
        updateId: "",
        updateTime: "",
        isDelete: "",
        lastLoginTime: "",
        bak2: "",
        bak1: "",
      };
    },
  },
};
</script>

<style scoped>
</style>
